<template>
<div>
  <div class="top">
    <el-image src="./static/img/title.png" fit="contain" style="width: 300px;align-self: flex-start"></el-image>
    <el-menu @select="handleSelect" default-active="1" style="width: 700px" mode="horizontal" active-text-color="#ff9900">
      <el-menu-item index="1" route="/">首页</el-menu-item>
      <el-menu-item index="2">我的工作台</el-menu-item>
      <el-menu-item index="3">关于我们</el-menu-item>
    </el-menu>
    <el-link style="color: chocolate" href="http://localhost:8080/#/login" v-if="!user">亲，请登录</el-link>
    <span v-if="user">欢迎您,{{user.identity}}</span>
  </div>
  <div  class="research">
    <el-input prefix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
    <el-button style="background-color: chocolate;color: white">搜索</el-button>
  </div>
  <div class="circleImage">
    <el-carousel>
      <el-carousel-item v-for="item in imgList">
        <img class="image" alt="轮播图" :src="item" fit="fill">
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="region">
    <h1>热销爆款，今日大牌</h1>
    <el-tabs active-name="家用电器" class="tabs" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabList" :label="item" :name="item">
        <ul>
          <!-- v-for key值 -->
          <li class="goods" v-for="item in goodsList">
            <!-- 图片 -->
            <div class="goodsPhoto" @click="toGoodsInfo(item)">
              <img :src="item.pic" width="200px" height="200px">
              <div>{{item.name}}</div>
              <div>{{item.price}}元</div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>

  </div>
</div>
</template>

<script>
export default {
  name: "Mall1",
  created () {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    //借卖方和买家看到的商品列表不同
    if(this.user.identity == '2')
    {
      this.getRequest("../../static/index/class1.json").then(res=>
      {
        for(let i=0,length=res.length;i<length;i++)
        {
          this.goodsList.push(res[i]);
        }
        console.log(this.goodsList);
      })
    }else
    {
      this.getRequest("../../static/index/class2.json").then(res=>
      {
        for(let i=0,length=res.length;i<length;i++)
        {
          this.goodsList.push(res[i]);
        }
        console.log(this.goodsList);
      })
    }
  },
  data(){
    return{
      user:'',
      tabList:['家用电器','图书文娱','美妆个护','母婴玩具','服装鞋包',
        '医药保健','家居家具','房产汽车','食品酒类','旅游出行','手机电脑'],
      imgList:[
        require('../../static/img/mall1/1.jpg'),
        require('../../static/img/mall1/2.jpg'),
        require('../../static/img/mall1/3.jpg'),
        require('../../static/img/mall1/4.jpg'),
        require('../../static/img/mall1/5.jpg')
      ],
      goodsList:[],
    }
  },
  methods:{
    handleSelect(index)
    {
      if(index==='1')
      {
        this.$router.push("/")
      }else if(index==='2')
      {
        if(this.user)
        {
          let identity = this.user.identity;
          if(identity==='1')
          {
            this.$router.push("/admin");
          }
          else if(identity==='2')
          {
            this.$router.push("/home");
          }else
          {
            this.$router.push("/cvo");
          }
        }else
        {
          this.$router.push("/login")
        }

      }else
      {
        this.dialogVisible = true;
      }
    },
    handleClick(tab){
      //tab.name表示选中的名称，tab.index表示选中的索引，从0开始
      this.getRequest("../../static/index/class"+tab.index+".json").then(res=>
      {
        this.goodsList.splice(0,this.goodsList.length);
        for(let i=0,length=10;i<length;i++)
        {
          this.goodsList.push(res[i]);
        }
        this.goodsList.length = res.length;
        console.log(this.goodsList);
      })
    },
    toGoodsInfo(item)
    {
      if(this.user.identity=='2')
      {
        this.$router.push({
          name:'GoodsInfo',
          query:item
        });
      }
      else
      {
        this.$router.push({
          name:'GoodsInfo1',
          query:item
        });
      }
    }
    },
}
</script>

<style>
.top{
  padding: 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.research
{
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}
.circleImage{
  width: 950px;
  margin: auto;
}
.image{
  width:100%;
  height: 100%;
}
.region{
  text-align: center;
  color: chocolate;
  margin:auto 100px;
}
.goods{
  display: block;
  float: left;
  align-items: center;
  width: 250px;
  height: 280px;
}
.goodsPhoto{

  text-align: center;
  margin: 10px 0;
}
</style>
